<template>
  <div class="main-container">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <el-menu default-active="1" class="el-menu-vertical" @select="switchCategory">
        <el-menu-item index="0">关注</el-menu-item>
        <el-menu-item index="1">综合</el-menu-item>
        <el-menu-item index="2">后端</el-menu-item>
        <el-menu-item index="3">前端</el-menu-item>
        <el-menu-item index="4">组件</el-menu-item>
        <el-menu-item index="5">开发工具</el-menu-item>
        <el-menu-item index="6">阅读</el-menu-item>
        <el-menu-item index="7">其他</el-menu-item>

      </el-menu>
    </aside>

    <!-- 右侧文章列表 -->
    <div class="article-section">
      <el-form-item class="search-bar">
        <el-select v-model="searchType" class="select" style="width: 100px;">
          <el-option label="搜索标题" value="1"></el-option>
          <el-option label="搜索作者" value="2"></el-option>
        </el-select>
        <el-input v-model="searchText" placeholder="在这里友善的输入查询内容哟" style="width: 300px;"></el-input>
        <el-button @click="search" style="width: 60px;">
          <el-icon style="margin-right: 3px;">
            <Search />
          </el-icon>搜索</el-button>
      </el-form-item>

      <!-- 文章列表 -->
      <div v-for="item in items" :key="item.id" class="item">
        <div class="item-header">
          <h3><a :href="'./article/' + item.id">{{ item.title || "未命名文章" }}</a></h3>
          
          <p><strong>{{ item.authorName }}</strong> · {{ new Date(item.buildTime).toLocaleString() }} · {{ item.views }} 阅读</p>
          <p class="article-summary">{{ item.summary || "暂无摘要" }}</p>
        </div>
        <div class="info-container">
          <p>👍 {{ item.likes }} 点赞 | ⭐ {{ item.saves }} 收藏</p>
        </div>
      </div>
      

      <!-- 没有更多数据提示 -->
      <div v-if="!hasMoreData && !isLoading" class="no-more-data">到底了</div>
    </div>
  </div>
</template>



<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

// 数据状态
const searchText = ref(''); // 搜索框内容
const searchType = ref('1'); // 搜索类型（1=标题，2=作者）
const items = ref([]); // 文章列表
const currentPage = ref(1); // 当前页码
const totalPages = ref(1); // 总页数
const hasMoreData = ref(true); // 是否有更多数据
const isLoading = ref(false); // 是否正在加载数据

// 选择的分类ID，默认为0表示所有分类
const selectedCategory = ref(0);

// 获取 API 数据
async function fetchArticles(reset = false) {
  if (reset) {
    currentPage.value = 1;
    hasMoreData.value = true;
    items.value = []; // 清空现有文章
  }

  // 如果正在加载或没有更多数据，不重复加载
  if (isLoading.value || !hasMoreData.value) return;

  isLoading.value = true;
  // params: {
    // categoryId: selectedCategory.value, // 使用选中的分类ID
    //     pageNum: currentPage.value,
    //     pageSize: 5, // 每页获取10条数据
    //     searchType: searchType.value, // 添加搜索类型参数
    //     searchText: searchText.value, // 添加搜索文本参数
    //   }
console.log(
  'params:',
  {
    categoryId: selectedCategory.value, // 使用选中的分类ID
    pageNum: currentPage.value,
    pageSize: 5, // 每页获取10条数据
    searchType: searchType.value, // 添加搜索类型参数
    searchText: searchText.value, // 添加搜索文本参数
  }
);

  try {
    const response = await axios.get('/api/articles/search', {
      
      params: {
        categoryId: selectedCategory.value, // 使用选中的分类ID
        pageNum: currentPage.value,
        pageSize: 5, // 每页获取10条数据
        searchType: searchType.value, // 添加搜索类型参数
        searchText: searchText.value, // 添加搜索文本参数
      },
      
    });
    if(response.data.code !== 200){
      ElMessage.error(response.data.msg);
      return
    }
    const  data  = response.data.data;

  
    // 检查是否有更多数据
    if (data.listData.length > 0) {
      items.value = [...items.value, ...data.listData]; // 添加数据
      currentPage.value++; // 下一页
      totalPages.value = data.totalPages; // 设置总页数
    } else {
      hasMoreData.value = false; // 没有更多数据了
    }
  } catch (error) {
    ElMessage.error('获取文章失败，请稍后重试');
  } finally {
    isLoading.value = false;
  }
}

// 切换分类时重新获取数据
function switchCategory(categoryId: number) {
  selectedCategory.value = categoryId;
  fetchArticles(true); // 切换分类时重置文章列表
}

// 搜索功能
function search() {
  fetchArticles(true); // 搜索时重置文章列表
}

// 判断是否触底加载更多
function loadMore() {
  if (isScrollBottom() && hasMoreData.value && currentPage.value <= totalPages.value) {
    fetchArticles(); // 加载下一页文章
  }
}

// 判断是否滚动到底部
function isScrollBottom() {
  const container = document.querySelector('.article-section') as HTMLElement;
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight;
  const clientHeight = container.clientHeight;


  return scrollHeight - clientHeight <= scrollTop + 3;
}

// 生命周期钩子，页面加载时和卸载时处理滚动事件
onMounted(() => {
  fetchArticles(); // 初始化时获取文章列表
  const container = document.querySelector('.article-section') as HTMLElement;
  container.addEventListener('scroll', loadMore); // 监听滚动事件，加载更多文章
});

onUnmounted(() => {
  const container = document.querySelector('.article-section') as HTMLElement;
  container?.removeEventListener('scroll', loadMore); // 组件销毁时移除滚动监听
});
</script>



<style scoped>
.main-container {
  display: flex;
  /* 主布局为flex，使左侧导航栏和右侧内容对齐 */
}

.sidebar {
  width: 200px;
  /* 左侧导航栏宽度 */
  background-color:  var(--bPageBgColor);
  /* 背景色 */
  padding: 10px;
  /* 内边距 */
  margin: 20px;
  /* 外边距 */
  border-right: 1px solid #ccc;
  /* 右边的分隔线 */
}

.article-section {
  flex-grow: 1;
  /* 使文章部分自动填充剩余空间 */
  margin-left: 20px;
  /* 左侧空白 */
  background-color:  var(--bPageBgColor);
  /* 背景色 */
  padding: 20px;
  /* 内边距 */
  margin: auto;
  /* 自动调整水平居中 */
  max-width: calc(100% - 400px);
  height: calc(100vh - 200px);
  /* 设置高度为视口高度，留出顶部和底部空白 */
  overflow-y: auto;
  /* 设置为可滚动 */
}

.search-bar {
  display: flex;
  /* 搜索框和按钮横向排列 */
  margin-bottom: 20px;
  /* 搜索框与内容的间距 */
}

.item {
  margin-bottom: 20px;
  /* 每个文章条目之间的间距 */
  padding: 15px;
  /* 每个文章条目的内边距 */
  border-bottom: 1px solid #eaeaea;
  /* 底部的分隔线 */
  background-color:  var(--bPageBgColor);
  /* 背景为白色 */
  border-radius: 5px;
  /* 圆角 */
}

.item-header h3 {
  margin: 0 0 5px 0;
  /* 标题与其他内容的间距 */
  font-size: 18px;
  /* 标题字体大小 */
  color: #333;
  /* 标题颜色 */
}

.item-header p {
  margin: 0;
  font-size: 14px;
  /* 作者和时间的字体大小 */
  color:  var(--bTextColor);
  /* 字体颜色为灰色 */
}

.info-container {
  font-size: 14px;
  /* 文章内容字体大小 */
  color: var(--bTextColor);
  /* 文章内容的颜色 */
  margin-top: 10px;
  /* 与标题和作者的间距 */
}

.no-more-data {
  text-align: center;
  /* 文字居中 */
  color: var(--bTextColor);
  /* 文字颜色为灰色 */
  padding: 10px 0;
  /* 上下内边距 */
}
.article-summary {
  font-size: 14px;
  color: var(--bTextColor);
  margin: 10px 0;
  /* Spacing between the title and the summary */
}

</style>
